import React, { useEffect, useState, useRef, Suspense } from 'react'
import { Outlet, useNavigate } from 'react-router'

import { Tree } from 'antd';

import { UserOutlined, EnvironmentOutlined, DownOutlined, HomeOutlined } from '@ant-design/icons';

import PageLoading from '../../component/pageLoading'

import styles from './index.module.css'
import { jumpTo } from '../../utils/jump'

//列
import { treeData } from './testData.js'

//网点用户
function Personnel() {
    //导航
    const navigate = useNavigate()

    //[]空数组相当于componentDidMount
    useEffect(() => {

        return () => {
        }
    }, []);

    // const onSelect = (selectedKeys, info) => {
    //     console.log('selected', selectedKeys, info);

    // };

    const onSelect = (selectedKeys, { node }) => {
        console.log(node);
        const level = node.pos.split('-').length;
        console.log(`点击了第 ${level} 级节点，位置：${node.pos}`);

        jumpTo(navigate, '/main/personnel/test1', true, null)
    };

    //节点有数据不会触发该方法
    // const onLoadData = (treeNode) =>
    //     new Promise(resolve => {
    //         if (children) {
    //             resolve();
    //             return;
    //         }
    //         setTimeout(() => {

    //             resolve();
    //         }, 3000);
    //     });

    const onLoadData = (treeNode) => {



    }



    return (
        <div className={styles.root_box}>
            <div className={styles.tree_box}>
                <Tree
                    loadData={onLoadData}
                    showIcon={true}
                    showLine={true}
                    switcherIcon={<DownOutlined />}
                    defaultExpandedKeys={['0-0-0']}
                    onSelect={onSelect}
                    treeData={treeData}
                />
            </div>
            <div className={styles.main_box}>
                <Suspense fallback={<PageLoading />}>
                    <Outlet ></Outlet>
                </Suspense>
            </div>
        </div>
    )
}

export default Personnel;